<template>
	<view v-if="showPopup" class="locality-popup" :style="popupStyle">
		<uni-transition mode-class="fade" :show="showAni"
			:styles="{'position':'fixed','z-index':1,'top':0,'width':'100%','height':'100%','backgroundColor':'rgba(0,0,0,0.4)'}"
			@change="aniMaskChange" @click="aniMaskClick">
		</uni-transition>
		<uni-transition mode-class="slide-top" :show="showAni"
			:styles="{'position':'fixed','z-index':2,'top':0,'width':'100%','height':contentHeight,'padding':0,'fontSize':0}">
			<view class="locality-popup__content">
				<view class="header">
					<slot></slot>
				</view>
				<view v-if="isFooter" class="footer">
					<view class="footer__button">
						<u-button type="white" @tap="tapResetButton">
							<slot name="resetButton">重置</slot>
						</u-button>
					</view>
					<view class="footer__button">
						<u-button type="primary" @tap="tapConfirmButton">
							<slot name="confirmButton">确定</slot>
						</u-button>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import type { BoundingRect } from '@/hooks/bounding-rect';
	import type { UniTransitionOnChangeEvent } from '@uni-helper/uni-ui-types';
	import { ref, withDefaults, computed, getCurrentInstance, onMounted, nextTick, inject } from 'vue';
	import { getBoundingClientRect } from '@/utils/node';
	import { isEmpty } from '@/utils/util';

	export interface Props {
		el ?: string;
		top ?: number | string;
		isFooter ?: boolean;
		isSafaArea ?: boolean;
		contentHeight ?: string;
	}

	const boundingRect = inject<BoundingRect>('boundingRect') as BoundingRect;

	const elHeight = ref(0);

	const props = withDefaults(defineProps<Props>(), {
		el: '',
		top: 0,
		isFooter: true,
		isSafaArea: false,
		contentHeight: '80%'
	});

	const emit = defineEmits<{ close : []; reset : []; confirm : [] }>();

	const currentInstance = getCurrentInstance();

	async function computeBoundingClientRect() {
		await nextTick();
		if (isEmpty(props.el)) return;
		getBoundingClientRect(currentInstance, props.el).then((rect) => {
			elHeight.value = rect.height ?? 0;
		});
	}
	onMounted(async () => {
		await computeBoundingClientRect();
	});

	const popupStyle = computed(() => {
		if (props.isSafaArea) {
			const top = isEmpty(props.el) ? Number(props.top) : elHeight.value;
			return { top: `${boundingRect.safeArea.height + top}px` }
		}
		return { top: isEmpty(props.el) ? props.top : `${elHeight.value}px` }
	})

	const showPopup = ref(false);
	const showAni = ref(false);

	function aniMaskChange(event : UniTransitionOnChangeEvent) {
		if (!event.detail) {
			showPopup.value = false;
			emit('close');
		}
	}

	function aniMaskClick() {
		showAni.value = false;
	}

	function tapResetButton() {
		emit('reset');
	}

	function tapConfirmButton() {
		emit('confirm');
	}



	defineExpose({
		open: () => {
			showPopup.value = true;
			showAni.value = true;
			computeBoundingClientRect();
		},
		close: () => {
			showAni.value = false;
		},
		toggle: () => {
			if (showAni.value) {
				showAni.value = false;
				return;
			}
			showPopup.value = true;
			showAni.value = true;
			computeBoundingClientRect();
		}
	})
</script>

<style scoped lang="scss">
	.locality-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 1;
		background-color: transparent;
		transform: translate(0, 0);
		overflow: hidden;


		&__content {
			display: inline-flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			background-color: white;
			font-size: 0;
			border-radius: 0 0 20rpx 20rpx;

			.header {
				position: relative;
				display: flex;
				flex: 1;
				flex-direction: column;
				overflow: hidden;
				border-radius: 0 0 20rpx 20rpx;
			}

			.footer {
				position: relative;
				display: inline-flex;
				flex-shrink: 0;
				width: 100%;
				height: 80rpx;
				background-color: white;
				box-shadow: 0 -1px 6px 0 rgba(0, 0, 0, 0.1);

				&__button {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					height: 100%;

					&:last-child {
						background-color: $uni-bg-color-primary;
					}
				}
			}
		}
	}
</style>